<template>
  <div style="padding: 10px;">
    <el-row :gutter="10">
      <fold :span="5" :xs="24" :show.sync='sideshow' v-show="treeIndex==0">
        <el-card shadow="never">
          <org-tree ref="orgTree" modelType="'dept','community','floor','unit','room'" @nodeClick="handleNodeClick" @firstNodeClick="handleFirstNodeClick"/>
        </el-card>
      </fold>
      <!--<el-col :span="5" :xs="24" v-show="treeIndex==1">-->
        <!--<el-card shadow="never">-->
          <!--<div class="head-container">-->
            <!--<el-input-->
              <!--v-model="orgName"-->
              <!--placeholder="请输入名称"-->
              <!--clearable-->
              <!--size="small"-->
              <!--prefix-icon="el-icon-search"-->
              <!--style="margin-bottom: 20px"-->
            <!--&gt;-->
              <!--<el-button  slot="append" icon="el-icon-refresh" @click="refresh" circle></el-button>-->
            <!--</el-input>-->
          <!--</div>-->
          <!--<div class="head-container">-->
            <!--<el-tree-->
              <!--:data="assOptions"-->
              <!--:props="defaultProps"-->
              <!--show-checkbox-->
              <!--:expand-on-click-node="false"-->
              <!--ref="tree"-->
              <!--default-expand-all-->
              <!--node-key="id"-->
              <!--@check-change="handleCheckchange"-->
            <!--/>-->
          <!--</div>-->
        <!--</el-card>-->
      <!--</el-col>-->
      <el-col :span="sideshow ? 19 : 24" :xs="24">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="parentNames">
              <el-breadcrumb-item v-for="src in parentNames.split(',')">{{src}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleCbjl" :class="{'btn-pitch-on':activeName=='cbjl'?true:false}" v-hasPermi="['payfee:ruleCost:list']">
                <svg-icon icon-class="cbjl" />
                仪表费用
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" :class="{'btn-pitch-on':activeName=='qfmx'?true:false}" @click="handleQfmx" v-hasPermi="['payfee:ruleCost:selectAdueRecord']">
                <svg-icon icon-class="qfmx" />
                收费中心
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" :class="{'btn-pitch-on':activeName=='jfjl'?true:false}" @click="handleJfjl" v-hasPermi="['payfee:ruleCost:list']">
                <svg-icon icon-class="jfjl" />
                缴费记录
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addCostTemp" :class="{'btn-pitch-on':activeName=='lsfy'?true:false}" v-hasPermi="['payfee:ruleCost:add']">
                临时收费
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleBzj" :class="{'btn-pitch-on':activeName=='bzj'?true:false}" v-hasPermi="['payfee:ruleCost:list']">
                <svg-icon icon-class="BZJ" />
                保证金
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleYskx" :class="{'btn-pitch-on':activeName=='yskx'?true:false}" v-hasPermi="['payfee:advanceReceipt:list']">
                <svg-icon icon-class="YSKX" />
                预收款项
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  type="primary" plain icon="el-icon-check" size="mini" @click="handleJiaoban" v-hasPermi="['payfee:HandRecord:add']">
                交 班
              </el-button>
            </el-col>
          </el-row>

          <div class="main">
            <payment-detail ref="paymentRef" v-show="mainName=='qfmx'" :pageParam="pageParam" @assConfirm="assConfirm" @handlerPayment="handleJfjl"/>
            <receipt-form ref="receiptRefs" v-show="mainName == 'jfjl'" />
            <meter-payfee-list ref="copyRoomRefs" :pageParam="pageParam" v-show="mainName == 'cbjl'" />
            <bail-rule-cost-list ref="bailRefs" v-show="mainName == 'bzj'" />
            <advance-receipt-list ref="yskxRefs" v-show="mainName == 'yskx'" />
          </div>

        </el-card>
      </el-col>
    </el-row>
    <temp-cost-add ref="costAddRef" @cancel="$refs.paymentRef.getList()"/>

    <HandRecordForm ref="formRef" :currentNode="currentNode"/>

  </div>
</template>

<script>

  import PaymentDetail from "./paymentDetail";
  import  TempCostAdd from "@/views/payfee/tempCost/add"
  import receiptForm from "./receipt/receiptForm"
  import BailRuleCostList from "./receipt/bailRuleCostList"
  import MeterPayfeeList from "./meter/meterPayfeeList"
  import AdvanceReceiptList from "./advanceReceipt/advanceReceiptList" //预收款项
  import HandRecordForm from "@/views/payfee/HandRecord/form.vue"
  import { getParentNames } from "@/api/system/dept";

  export default {
    name: "TollCenter",
    components:{PaymentDetail,TempCostAdd,receiptForm,MeterPayfeeList,BailRuleCostList,AdvanceReceiptList,HandRecordForm},
    data() {
      return {
        currentNode:{},
        activeName:'qfmx',
        mainName:'qfmx',
        modelType:'',
        treeIndex:0,
        //房间字典
        assOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        pageParam:{
          roomIds:'',
          roomIdArray:[]
        },
        parentNames:'',
        sideshow: true
      };
    },
    created() {

    },
    methods: {
      handleNodeClick(node){
        this.handleParentNames(node.id)
        this.currentNode = node
        this.activeName='qfmx'
        this.mainName='qfmx'
        if(node.modelType=='room'){
          this.setRoomIds(node.id)
        }
      },
      handleFirstNodeClick(node){
        this.handleParentNames(node.id)
        this.currentNode = node
        if(node.modelType=='room'){
          this.setRoomIds(node.id)
        }
      },
      handleParentNames(id){
        getParentNames(id).then(res=>{
          this.parentNames = res.msg
        })
      },
      setRoomIds(id){
        this.pageParam.roomIds = null;
        this.pageParam.roomIdArray = [];
        this.pageParam.roomIdArray.push(id);
        this.pageParam.roomIds = id;
      },
      addCostTemp(){
        this.$refs.costAddRef.show(this.pageParam)
      },
      //缴费记录
      handleJfjl(){
        this.activeName='jfjl'
        if(this.pageParam.roomIds){
          this.mainName='jfjl'
          this.$refs.receiptRefs.init(this.pageParam)
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      handleQfmx(){
        this.mainName='qfmx'
        this.activeName='qfmx'
        this.$refs.paymentRef.init()
      },
      handleCbjl(){
        this.activeName='cbjl'
        if(this.pageParam.roomIds){
          this.mainName='cbjl'
          this.$refs.copyRoomRefs.show()
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      //保证金
      handleBzj(){
        this.activeName='bzj'
        if(this.pageParam.roomIds){
          this.mainName='bzj'
          this.$refs.bailRefs.init(this.pageParam)
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      //预收款项
      handleYskx(){
        this.activeName='yskx'
        if(this.pageParam.roomIds){
          this.mainName='yskx'
          this.$refs.yskxRefs.init(this.pageParam)
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      handleJiaoban(){
        if(this.currentNode.modelType == 'community'){
          this.$refs.formRef.show({"type":"ADD"});
        }else{
          this.msgWarning("请先选择小区!");
        }
      },
      //生成费用
      handleFyjs(){
        this.activeName='fyjs'
        if(this.pageParam.roomIds){
          this.mainName='fyjs'
          this.$refs.chargeRef.show(this.pageParam)
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      //关联房间确认
      assConfirm(associateRoomList,assSelection){
        this.assOptions = [];
        this.treeIndex = 1;
        let assTree = {label:'全选',children:[],id:'ALL'};
        for(let i in associateRoomList){
          let row = associateRoomList[i];
          let label = `${row.communityName}-${row.roomName}[${row.ownerVo.ownerName}]`
          assTree.children.push({label:label,id:row.id,modelType:'room'})
        }
        this.assOptions.push(assTree);
        this.$refs.paymentRef.hideAssBtn()
        let keys = [];
        for(let i in assSelection){
          keys.push(assSelection[i].id)
        }
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(keys);
        })
      },
      refresh(){
        this.treeIndex = 0
        this.$refs.paymentRef.openAssBtn()
      },
      handleCheckchange(){
        let keys = this.$refs.tree.getCheckedKeys();
        if(keys.length > 0){
          let index = keys.findIndex(v=> v=='ALL')
          if(index != -1){
            keys.splice(index,1)
          }
          this.pageParam.roomIds = keys.join(",")
          this.pageParam.roomIdArray = keys

        }else{
          this.pageParam.roomIds = null
          this.pageParam.roomIdArray = []
        }
      },

    }
  };
</script>
<style lang="scss" scoped >
  .btn-pitch-on{
    background-color: #1890ff;
    color: #FFFFFF;
  }
</style>
